.grid-container {
    margin: 0 auto;
    max-width: 1200px;
    padding-top: 40px; 
    width: 80vw;
}
  
.card {
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 300px; 
    width: 200px;
}

.card-2330C {
    background-color: #CECDCF; 
}
.card-705C {
    background-color: #F5DADF; 
}
.card-663C {
    background-color: #E2E0E3; 
}
.card-4031C {
    background-color: #F9DBC6; 
}
.card-663CD {
    background-color: #EDEBED; 
}
.card-7457C {
    background-color: #C3E5E9; 
}
.card-4175C {
    background-color: #99C4C8; 
}
.card-4176C {
    background-color: #C0D5CF; 
}
.card-7451C {
    background-color: #E2E8DE; 
}
.card-663C {
    background-color: #F2ECE8; 
}
.card-footer {
      background-color: #fff;
      padding: 20px; 
}
.card-name {
    color: #000;
    font-size: 18px;
    margin: 0;
}

.card-name span {
    display: block; 
}

.grid-item {
    display: grid;
    justify-content: center;
}

.grid-item a {
    text-decoration: none;
}

.grid-item i {
    font-size: 180px;
    padding-top: 17.5px;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 17.5px;
    color: #333;
}

.grid {
    display: grid;
    justify-content: center;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    grid-auto-rows: auto;
    gap: 40px; 
    min-width: auto;
}

.card-footer-skills {
    padding: 10px;
}

.grid-item-skills i {
    font-size: 90px;
    padding-top: 8.75px;
    padding-left: 5px;
    padding-right: 5px;
    padding-bottom: 8.75px;
    color: #333;
}

.grid-skills {
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    grid-auto-rows: auto;
    gap: 20px;
}

.card-skills {
    min-height: 150px;
    width: 100px;
}

.card-name-skills {
    font-size: 1em;
}

@media (max-width: 639.98px) {
    .grid {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .grid-skills {
        display: grid;
        justify-content: center;
        min-width: auto;
    }

    .grid-header {
        text-align: center;
    }
}